<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-09-12 14:39:50
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-09-12 14:48:53
 * @FilePath: \vue-sound\src\components\MenuTreeComponent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-menu
    :default-active="activeMenu"
    class="menu-tree"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    @select="handleMenuSelect"
  >
    <!-- 硬编码菜单项用于测试 -->
    <el-menu-item index="/dashboard">
      <el-icon><House /></el-icon>
      <span>仪表盘</span>
    </el-menu-item>
    
    <el-menu-item index="/speech">
      <el-icon><Microphone /></el-icon>
      <span>语音转文字</span>
    </el-menu-item>
    
    <el-menu-item index="/pdf">
      <el-icon><Document /></el-icon>
      <span>PDF预览</span>
    </el-menu-item>
    
    <el-menu-item index="/table">
      <el-icon><Grid /></el-icon>
      <span>数据表格</span>
    </el-menu-item>
    
    <el-menu-item index="/users">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
    
    <el-menu-item index="/settings">
      <el-icon><Setting /></el-icon>
      <span>设置</span>
    </el-menu-item>
    
    <el-menu-item index="/shandong-map">
      <el-icon><MapLocation /></el-icon>
      <span>山东省地图</span>
    </el-menu-item>
    
    <el-menu-item index="/invoice/list">
      <el-icon><Money /></el-icon>
      <span>电子发票</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const activeMenu = computed(() => route.path)

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  console.log('🎯 菜单选择事件触发:', index)
  console.log('🎯 当前路由:', route.path)
  console.log('🎯 路由实例:', router)
  
  if (index && index !== route.path) {
    console.log('🎯 开始跳转到:', index)
    router.push(index).then(() => {
      console.log('🎯 路由跳转成功')
    }).catch(err => {
      console.error('🎯 路由跳转失败:', err)
    })
  } else {
    console.log('🎯 无需跳转，已在目标页面')
  }
}
</script>

<style scoped>
.menu-tree {
  border-right: none;
  height: calc(100vh - 80px);
}

.menu-tree .el-menu-item {
  height: 50px;
  line-height: 50px;
}

.menu-tree .el-sub-menu .el-menu-item {
  height: 45px;
  line-height: 45px;
}
</style>
